{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '工具类:example/utilities/index', '边框'])}
<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">

          <p>使用边框类添加或删除元素的边框。从所有边框中选择，或者一次选择一个。</p>
          <h6>增加的</h6>
          <div class="border-example border-example-border-utils">
            <span class="border"></span>
            <span class="border-top"></span>
            <span class="border-end"></span>
            <span class="border-bottom"></span>
            <span class="border-start"></span>
          </div>
          <pre>&lt;span class="border"&gt;&lt;/span&gt;
&lt;span class="border-top"&gt;&lt;/span&gt;
&lt;span class="border-end"&gt;&lt;/span&gt;
&lt;span class="border-bottom"&gt;&lt;/span&gt;
&lt;span class="border-start"&gt;&lt;/span&gt;</pre>
          <h6>删减的</h6>
          <div class="border-example border-example-border-utils border-example-border-utils-0">
            <span class="border-0"></span>
            <span class="border-top-0"></span>
            <span class="border-end-0"></span>
            <span class="border-bottom-0"></span>
            <span class="border-start-0"></span>
          </div>
          <pre>&lt;span class="border-0"&gt;&lt;/span&gt;
&lt;span class="border-top-0"&gt;&lt;/span&gt;
&lt;span class="border-end-0"&gt;&lt;/span&gt;
&lt;span class="border-bottom-0"&gt;&lt;/span&gt;
&lt;span class="border-start-0"&gt;&lt;/span&gt;</pre>
          <h6>边框颜色</h6>
          <p>使用基于主题颜色构建的类更改边框颜色。</p>
          <div class="border-example border-example-border-utils">
            <span class="border border-primary"></span>
            <span class="border border-secondary"></span>
            <span class="border border-success"></span>
            <span class="border border-danger"></span>
            <span class="border border-warning"></span>
            <span class="border border-info"></span>
            <span class="border border-light"></span>
            <span class="border border-dark"></span>
            <span class="border border-white"></span>
          </div>
          <pre>&lt;span class="border border-primary"&gt;&lt;/span&gt;
&lt;span class="border border-secondary"&gt;&lt;/span&gt;
&lt;span class="border border-success"&gt;&lt;/span&gt;
&lt;span class="border border-danger"&gt;&lt;/span&gt;
&lt;span class="border border-warning"&gt;&lt;/span&gt;
&lt;span class="border border-info"&gt;&lt;/span&gt;
&lt;span class="border border-light"&gt;&lt;/span&gt;
&lt;span class="border border-dark"&gt;&lt;/span&gt;
&lt;span class="border border-white"&gt;&lt;/span&gt;</pre>
          <h6>边框宽度</h6>
          <div class="border-example border-example-border-utils">
            <span class="border border-1"></span>
            <span class="border border-2"></span>
            <span class="border border-3"></span>
            <span class="border border-4"></span>
            <span class="border border-5"></span>
          </div>
          <pre>&lt;span class="border border-1"&gt;&lt;/span&gt;
&lt;span class="border border-2"&gt;&lt;/span&gt;
&lt;span class="border border-3"&gt;&lt;/span&gt;
&lt;span class="border border-4"&gt;&lt;/span&gt;
&lt;span class="border border-5"&gt;&lt;/span&gt;</pre>
          <h6>边框圆角</h6>
          <div class="border-example border-example-border-utils">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" width="75" alt="..." class="rounded">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" width="75" alt="..." class="rounded-top">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" width="75" alt="..." class="rounded-end">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" width="75" alt="..." class="rounded-bottom">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" width="75" alt="..." class="rounded-start">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" width="75" alt="..." class="rounded-circle">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" width="150" height="75" alt="..." class="rounded-pill">
          </div>
          <pre>&lt;img src="..." alt="..." class="rounded"&gt;
&lt;img src="..." alt="..." class="rounded-top"&gt;
&lt;img src="..." alt="..." class="rounded-right"&gt;
&lt;img src="..." alt="..." class="rounded-bottom"&gt;
&lt;img src="..." alt="..." class="rounded-left"&gt;
&lt;img src="..." alt="..." class="rounded-circle"&gt;
&lt;img src="..." alt="..." class="rounded-pill"&gt;</pre>
          <h6>尺寸</h6>
          <div class="border-example border-example-border-utils">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" width="75" alt="..." class="rounded-0">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" width="75" alt="..." class="rounded-1">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" width="75" alt="..." class="rounded-2">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" width="75" alt="..." class="rounded-3">
          </div>
          <pre>&lt;img src="..." alt="..." class="rounded-0"&gt;
&lt;img src="..." alt="..." class="rounded-1"&gt;
&lt;img src="..." alt="..." class="rounded-2"&gt;
&lt;img src="..." alt="..." class="rounded-3"&gt;</pre>

        </div>
      </div>
    </div>

  </div>